<style lang="less">
    @import "loanFlawFix.less";
</style>
<template>
    <div class="search">
        <Row style="background-color: #f9fafc;" v-if="isShowTaskList">
            <Alert show-icon style="height: 30px;">
                <div style="margin-top:-2px">存在待处理的订单信息，请及时处理</div>
            </Alert>
        </Row>
        <Row  v-if="isShowTaskList">
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号" style="width: 200px" />
                            </Form-item>
                            <Form-item label="合作商名称" prop="dealerName">
                                <Input v-model="searchForm.dealerName" type="text" placeholder="请输入合作商名称" style="width:200px"/>
                            </Form-item>
                            <Form-item label="客户姓名" prop="custName">
                                <Input type="text" v-model="searchForm.custId" clearable placeholder="请输入客户姓名" style="width: 200px" />
                            </Form-item>
                            <Form-item label="瑕疵类型" prop="correctionType">
                                <Select v-model="searchForm.correctionType" clearable placeholder="请选择车辆属性" style="width:200px">
                                    <Option v-for="item in this.flawTypeList" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="申请状态" prop="flawApplyStatus">
                                <Select v-model="searchForm.flawApplyStatus" clearable placeholder="请选择案件状态" style="width:200px">
                                    <Option v-for="item in this.flawApplyStatusList" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="申请人" prop="createBy">
                                <Input type="text" v-model="searchForm.createBy" clearable placeholder="请输入证件号码" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="申请时间"  prop="activationTime">
                                <DatePicker v-model="searchForm.activationTime" type="daterange" format="yyyy-MM-dd hh:mm:ss" clearable
                                            @on-change="selectDateRange" placeholder="选择起始时间"
                                            style="width: 200px"></DatePicker>
                            </Form-item>
                            <Form-item style="margin-left: -35px;">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="addBtn" type="primary" icon="ios-search">创建修正申请</Button>
                    </Row>
                    <Row>
                        <Table v-bind:loading="loading"
                               border
                               v-bind:columns="columns"
                               v-bind:data="data"
                               sortable="custom"
                               @on-sort-change="changeSort"
                               @on-selection-change="showSelect"
                               :row-class-name="rowClassName"
                               ref="table">
                            <template slot-scope="{row,index}" slot="action">
                                <span v-if="row.flawApplyStatus=='draft'">
                                    <Button style="margin-right:5px" type="error" size="small" @click="delFlawFix(row)">删除</Button>
                                </span>
                                <span v-if="row.flawApplyStatus!='draft'">
                                    <Button style="margin-right:5px" disabled type="error" size="small" @click="delFlawFix(row)">删除</Button>
                                </span>
                                <Button style="margin-right:5px" type="primary" size="small" @click="showFlawFix(row)">查看</Button>
                            </template>
                            <template slot-scope="{row , index}" slot="flawApplyStatus">
                                <span>{{setFlawApplyStatus(row.flawApplyStatus)}}</span>
                            </template>
                            <template slot-scope="{row , index}" slot="correctionType">
                                <span>{{setCorrectionType(row.correctionType)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>                    </Row>
                </Card>
            </Col>
        </Row>
        <add-loan-flaw-fix v-if="this.addShowVisible" :dicKeysList="dicKeysList" @backGo="backGo"></add-loan-flaw-fix>
    </div>
</template>

<script>
    import { getByTypes } from '_p/basic/api/admin/datadic'
    import { getLoanFlawFixList,delFlawFix } from '@/projects/afs-core-business/api/afs-case/loan-flaw-fix/loanFlawFix'
    import AddLoanFlawFix from "./addLoanFlawFix";
    export default {
        name: "loanFlawFix",
        components: {AddLoanFlawFix},
        data(){
            return {
                loading:false,
                operationLoading:false,
                addShowVisible:false,
                showFlawFixVisible:true,
                isShowTaskList:true,
                dataDic: {},
                flawTypeList: [],
                flawApplyStatusList: [],
                conApplyStatusList: [],
                businessTypeList: [],
                searchForm: {
                    applyNo:'',
                    correctionType:'',
                    flawApplyStatus:'',
                    dealerName:'',
                    custId:'',
                    createBy:'',
                    activationTime:null,
                    pageNumber:1,
                    pageSize:10
                },
                dicKeysList:{
                    flawTypeList: [],
                    flawApplyStatusList: [],
                    conApplyStatusList: [],
                    businessTypeList: [],
                },
                dicKeys: [
                    'businessType',
                    'conApplyStatus',
                    'flawType',
                    'flawApplyStatus'
                ],
                columns: [
                    {
                        title: '操作',
                        key: 'action',
                        minWidth: 150,
                        align: 'center',
                        fixed: 'left',
                        slot: 'action'
                    },
                    {
                        title: '申请编号',
                        key: 'applyNo',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '客户姓名',
                        key: 'custNameRepeat',
                        minWidth: 150,
                        align: 'center',
                    },
                    {
                        title: '合作商名称',
                        key: 'channelFullName',
                        align: 'center',
                        minWidth: 150
                    },
                    {
                        title: '瑕疵类型',
                        key: 'correctionType',
                        align: 'center',
                        minWidth: 150,
                        slot: "correctionType"
                    },
                    {
                        title: '申请状态',
                        key: 'flawApplyStatus',
                        align: 'center',
                        minWidth: 150,
                        slot:'flawApplyStatus'
                    },
                    {
                        title: '申请人',
                        key: 'applicantName',
                        align: 'center',
                        minWidth: 150
                    },
                    {
                        title: '申请时间',
                        key: 'activationTime',
                        align: 'center',
                        minWidth: 150
                    },
                ],
                data: [],
                total: 0
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init() {
                this.initDataDic()
                this.getLoanFlawFixList()
            },
            initDataDic() {
                let self = this
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === '0000' && res.data) {
                        self.dataDic = res.data
                        this.businessTypeList.push(...res.data.businessType)
                        this.conApplyStatusList.push(...res.data.conApplyStatus)
                        this.flawTypeList.push(...res.data.flawType)
                        this.flawApplyStatusList.push(...res.data.flawApplyStatus)
                        this.dicKeysList.businessTypeList.push(...res.data.businessType)
                        this.dicKeysList.conApplyStatusList.push(...res.data.conApplyStatus)
                        this.dicKeysList.flawTypeList.push(...res.data.flawType)
                        this.dicKeysList.flawApplyStatusList.push(...res.data.flawApplyStatus)
                    }
                })
            },
            getLoanFlawFixList(){
                console.log(this.searchForm)
                getLoanFlawFixList(this.searchForm).then(res=> {
                    if(res.code === '0000'){
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v
                this.getTaskList()
                this.clearSelectAll()
            },
            changePageSize(v) {
                this.searchForm.pageSize = v
                this.getTaskList()
            },
            handleSearch(){
                this.getLoanFlawFixList();
            },
            handleReset(){
                this.$refs.searchForm.resetFields();
                this.searchForm={
                    applyNo:'',
                    correctionType:'',
                    flawApplyStatus:'',
                    dealerNo:'',
                    custId:'',
                    createBy:'',
                    activationTime:null,
                    pageNumber:1,
                    pageSize:10
                }
                // 重新加载数据
                this.getLoanFlawFixList();
            },
            setCorrectionType(val){
                let dic = {}
                this.flawTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            setFlawApplyStatus(val){
                let dic = {}
                this.flawApplyStatusList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            delFlawFix(val){
                console.log(val)
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除该条数据?",
                    onOk: () => {
                        this.searchForm.id = val.id;
                        this.operationLoading = true;
                        delFlawFix(this.searchForm).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.getLoanFlawFixList();
                            }
                        });
                    }
                })
            },
            addBtn(){
                this.isShowTaskList = false;
                this.addShowVisible = true;
            },
            backGo(){
              this.isShowTaskList = true;
              this.addShowVisible = false;
              this.getLoanFlawFixList();
            },
            showFlawFix(){

            },
            changeSort(){

            },
            showSelect(){

            },
            rowClassName(){

            }
        }
    }
</script>

<style scoped>

</style>
